<template>
    <div class="categories content-panel">
        <div class="remark" v-if="!categories.length">暂无任何应用，请联系管理员添加</div>
        <div v-for="category in categories" class="category">
            <div class="page-title">{{ category.categoryName }}</div>
            <div class="apps">
                <div v-for="app in category.apps" class="app-item d-flex content-panel cursor-pointer" @click="goApp(app)">
                    <el-icon class="icon mr-4"><component :is="app.icon" /></el-icon>
                    <div>
                        <div class="title font-bold font-big mb-2">{{ app.name }}</div>
                        <div class="remark">{{ app.remark }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const categories = ref([]);
onMounted(() => {
    app.https.get("/sys/app/group-by-category").then((resp) => {
        categories.value = resp;
    });
});

function goApp(item) {
    app.https.get("/sys/app/add-used-count", { id: item.id }, { showError: false });

    if (item.url && item.url.startsWith("http")) {
        // 外部地址，需要先获取code
        app.https.get("/sys/app/auth/code").then((resp) => {
            let target = "_self";
            if (item.openType == "new") {
                target = "_blank";
            }
            window.open(`${item.url}?code=` + resp, target);
        });
        return;
    }
    router.push(`/${item.url || item.code}`);
}
</script>

<style lang="scss" scoped>
.category:not(:last-child) {
    margin-bottom: 32px;
}

.apps {
    display: grid;
    grid-template-columns: repeat(auto-fill, 400px);
    gap: 16px;

    .app-item {
        box-shadow: 0 0 7px var(--main_shadow_color);
        border: 1px solid var(--main_border_color);
    }
}

.icon {
    font-size: 30px;
}
</style>
